
  <template>
  <div class="box">
    <header class="header">
      <router-link to="/liaoliao">
        <i class="el-icon-back"></i>
      </router-link>
      <p>通讯录</p>
      <img src="@/../public/img/liaoliao/phone.png" alt class="phone" />
    </header>

    <div class="menu-list">
        <div
          class="total"
          :class="{active:item.id === sel}"
          v-for="item in tabs"
          :key="item.id"
          @click="select(item)"
        >{{ item.label }}</div>
      </div>

    <div class="content">
    <input type="serch"  placeholder="搜索"/>
      <div class="all friend" v-show="sel === 1">
          好友
      </div>
    <div class="all" v-show="sel === 2">关注</div>
    <div class="all" v-show="sel === 3">群组</div>
    <div class="all" v-show="sel === 4">粉丝</div>
    </div>

    
  </div>
</template>


<script>
export default {
  data() {
    return {
      sel: 1,
      tabs: [
        { label: "好友", num: 0, id: 1 },
        { label: "关注", num: 0, id: 2 },
        { label: "群组", num: 0, id: 3 },
        { label: "粉丝", num: 0, id: 4 }
      ]
    };
  },
  methods: {
    select(item) {
      this.sel = item.id;
    }
  }
};
</script>

<style lang="scss" scoped>
.container .box {
  padding: 0 25px;
  display: flex;
  .header {
    height: 65.5px;
    padding-top: 26px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .el-icon-back {
      height: 13.25px;
      width: 14.25px;
      color: #1b1b1b;
      font-weight: 600;
    }
    p {
      font-size: 18px;
      font-weight: 600;
      color: #1a1a1a;
      font-family: PingFang-SC-Bold;
    }
    .phone {
      width: 0.2rem;
      height: 0.2rem;
    }
  }
  .menu-list {
    height: 0.44rem;
    width: 2.5rem;
    display: flex;
    
  }

  .total {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*height: 100%;*/
    /*line-height: 0.44rem;*/
    text-align: center;
    float: left;
    margin-right: 0.14rem;
    font-size: 0.15rem;
    margin-top: 0.25rem;
    color: #666666;
    position: relative;
    font-family: PingFang-SC-Medium;
  }
  .total.active {
    font-size: 0.18rem;
    color: #685DF1;
  }
  .content{
    margin-top: 0.215rem; 
    input{
        width: 325px;
        height: 27.5px;
        border: none;
        border-radius: 15px;
        padding-left: 10px;
        box-sizing: border-box;
        font-size: 14px;
        color: #999999;
        background-color: #E1E1E1;
    }
  }
}
</style>